<template>
	<!--根据id 获取视频播放信息  背景黑色 视频居中-->
	<div class="video-middle-play-box">
        <HeaderNav v-if="$channel=='zyzq'&&getPlatform =='app'" :title="'热门主播'"></HeaderNav>
		<ZxyhHeader v-if="$channel=='zxyh' && getPlatform =='app'" :title="''" :isClose='false'></ZxyhHeader>
		<div class="video-box" v-if="videoCoverImgIs">
			<div class="video-play-btn">
				<img v-show="videoInfo.videoImg && videoInfo.videoImg !=''" :src="videoInfo.videoImg" />
				<div id="aliVideo" style="clear: both;" @click="clickVideo"></div>
			</div>
		</div>
		<video controlslist="nodownload" ref="videoref" :poster="(videoInfo.videoImg && videoInfo.videoImg != '')? videoInfo.videoImg :'none'" :src="videoInfo.video" webkit-playsinline="" playsinline="" controls="controls" width="100%" style="object-fit: fill;">
			<span>您的手机版本，网页版暂未能支持！</span>
		</video>
	</div>
</template>

<script>
import HeaderNav from '@/components/zyzq/headerNav'
import ZxyhHeader from '@/components/zxyh/zxyhHeader'
	export default {
		components:{
          HeaderNav,
		  ZxyhHeader
		},
		data() {
			return {
				videoCoverImgIs: true,
				videoInfo: "",
				getPlatform:fun.getPlatform() //app wx
			}
		},
		created() {
			
			this.$store.dispatch("hideNav");
			this.getVideoPlayData();
			fun.dotNum("smallVideoPlay_page"+this.$route.query.id)
		},
		methods: {
			getVideoPlayData() {
				this.$http.get("/h5live/getZhuBoInfo?id=" + this.$route.query.id).then(res => {
						if(res.data.code == "000000") {
							if(res.data.data) {
								this.videoInfo = res.data.data;
							}
						}
					})
					.catch(response => {

					});
			},
			clickVideo() {
				this.videoCoverImgIs = false;
				this.$refs.videoref.play();
			},
		}
	}
</script>

<style scoped="scoped">
	.video-middle-play-box {
		width: 100vw;
		height: 100vh;
		background: black;
	}
	
	video {
		width: 750px;
		height: 424px;
		position: absolute;
		top: 350px;
		left: 0;
		z-index: 100;
	}
	
	.video-box {
		width: 100vw;
		height: 424px;
		position: absolute;
		top: 350px;
		left: 0;
		z-index: 111;
	}
	
	.video-play-btn img {
		width: 750px;
		height: 424px;
	}
	
	#aliVideo {
		width: 130px;
		height: 130px;
		background: url(../assets/images/play.png) no-repeat;
		background-size: 130px 130px;
		position: absolute;
		top: 144px;
		left: 310px;
		z-index: 100;
	}
</style>